<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="SexPie" :style="{ width: '100%', height: '100%' ,}"></div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";
export default {
  name: "SexPie",
  // components: {Pie,EDigitalFlop, Map_1, EFullScreenContainer},
  data(){
    return{
      chartInstance: null,
      echart:echarts,
      option:{},
      sexCount:[]
    }
  },
  mounted() {
    this.initChart();
    this.getSexCount();
    this.getData();
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods:{
    // 获取男女生数
    getSexCount(){
      request.get("/info_account/getSexCount").then(res=>{
        this.sexCount.push(...res.data.data)
        this.getData()
      })
    },
    initChart() {
      console.log("initChart")
      this.chartInstance = this.echart.init(document.getElementById("SexPie"),);
    },
    async getData() {
      console.log("getData")
      await this.updateData();
    },

    updateData(){
      this.option={
        title: {
          text: '男女比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '80%',
            data: this.sexCount,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chartInstance.setOption(this.option,true)
    },

  },
};
</script>

<style scoped>

</style>